/*
 注册路由组件
* */
import React, {Component} from 'react';
import cssModule from './register.module.less'
import Logo from "../../components/logo/logo";


import {Button, InputItem, WhiteSpace} from 'antd-mobile';

class Register extends Component {
    state={
        account: "",
        btndisabled:true
    }
    // 切换账号密码登录页面
    toLogin = () =>this.props.history.replace('/login')
    // 跳转登录页面
    onNext = () => this.props.history.push('/getCode')
    // 监听表单事件
    onChangeInput = (type, val) => {
        this.setState({
            [type]: val
        })
        // 动态控制按钮是否显示
        if(type==='account'){
            this.setState({
                btndisabled: val.replaceAll(" ","").length>=11 ? false:true
            })
        }
    }
    render() {
        return (
            <div className='yp bg-White hei100-scroll'>
                <h3 className='fo-30 font-wei600 mt40'>手机号登录/注册</h3>
                {/*<Logo></Logo>*/}
                <InputItem className='mt40 line-1-d5d4d4-bottom '
                           clear
                           type="phone"
                           placeholder="输入手机号码"
                           labelNumber={3}
                           onChange={(val) => this.onChangeInput('account', val)}
                >+86</InputItem>
                <Button className='mt40' type="primary" disabled={this.state.btndisabled} onClick={this.onNext}>下一步</Button>
                <div className='mt20 fo-blue' onClick={this.toLogin}>账户密码登录</div>
                {/*<div className={cssModule.thirdLogin}>*/}
                {/*    <div>微信登录</div>*/}
                {/*</div>*/}
                <footer className={cssModule.footer}>阅读 <a>《洋聘协议》</a></footer>
            </div>


        );
    }
}

export default Register;